iT邦幫忙

0

9.Bootstrap(中文教程)元件:alert可關閉的提示

  • 分享至 

  • xImage
  •  

ㄧ.alert可關閉的提示

<div class="component demo">
  <div class="alert alert-primary alert-dismissible fade show" role="alert">
   <h4>Alert</h4>
   hello~ <a href="#" class="alert-link">see more.</a>
   <button class="close" data-dismiss="alert">×</button>
 </div>
</div>

.component.demo{
 padding: 50px;
}

重點:
1.在alert加一個關閉的按鈕也就是button,close為定義關閉按鈕。×為x的字碼
2.在alert定義的這一層在定義一個將關閉按鈕位置固定,也就是alert-dismissible
3.如果要讓關閉按鈕有功能將alert關掉的話,要在button的屬性加入data-dismiss="alert"
4.fade show為隱藏跟顯示的效果
5.記得要有關閉alert的功能一定要有bootstrap.js

二.alert外面層的按鈕關閉

<div class="component demo">
  ......
   <button class="btn btn-danger close-alert">Close</button>
</div>


$(document).ready(()=>{
 $('.close-alert').click(()=>{
  $('.alert').alert('close');
 });
});

重點:
1.在外層添加button,button加入bootstrap的btn與樣式btn-danger
2.close-alert為自定義,這個自定義是要讓自己在js寫的事件觸發的
3.close-alert點擊事件,點擊讓alert關掉

4.下面為重點為官網alert事件的資料(5.6.7.)
5.$().alert():發出警報,偵聽具有 data-dismiss="alert" 屬性的後代元素上的點擊事件。 (使用 data-api 的自動初始化時不需要)
6.$().alert('close'):從 DOM 中刪除來關閉警報。如果元素上出現 .fade 和 .show,則在刪除之前該警報將淡出。
7.$().alert('dispose'):銷毀一個元素的警報

二.監聽alert

$(document).ready(()=>{
 ......
 
 $('.alert').on('close.bs.alert',()=>{
  console.log('close alert');
 });
 
 
 $('.alert').on('closed.bs.alert',()=>{
  console.log('closed alert');
 });
});

重點:
1.close.bs.alert:當調用 close 實例方法時,此事件會立即觸發
2.closed.bs.alert:警報關閉時,會觸發此事件(等待CSS轉換完成)。

codepen
參考:bootstrap4


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言